import React, { useState, useEffect } from 'react';
import { Table, Input } from 'antd';
import { useSelector, useDispatch, useStore } from 'umi';

import styles from './index.less';
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '电话',
    className: '电话',
    dataIndex: 'phone',
  },
  {
    title: 'ID',
    dataIndex: 'id',
  },
];

export default () => {
  const [search, setSearch] = useState('');
  const { user } = useSelector((state) => state.cm);
  const dispatch = useDispatch();
  useEffect(() => {
    // fetchUser()
    dispatch({
      type: 'cm/gradeModel',
      payload: {},
    });
  }, []);
  return (
    <div className={styles.container}>
      <div>
        <Table
          rowKey="id"
          scroll={{ x: 'max-content' }}
          columns={columns}
          dataSource={user}
          bordered
          title={() => (
            <Input value={search} onChange={(e) => setSearch(e.target.value)} />
          )}
        />
      </div>
    </div>
  );
};
